<template>
	<view>
		<text v-for="(item, index) in data.text" :key="index">
			<text v-if="item.name === 'text'" class="text">{{ item.text }}</text>
			<image v-else class="emoji" :src="item.src"></image>
		</text>
	</view>
</template>

<script lang="ts" setup>
	import { watchEffect, ref } from 'vue';
	interface IProps {
		content : Record<string, any>;
	}
	const props = withDefaults(defineProps<IProps>(), {
		content: () => ({}),
	});
	const data = ref();
	watchEffect(() => {
		data.value = props.content;
	});
</script>
<style lang="scss" scoped>
	.emoji {
		width: 20px;
		height: 20px;
	}

	.text {
		white-space: pre-wrap;
		word-break: break-word;
		font-size: 14px;
		text-size-adjust: none;
	}
</style>